﻿@inject I18n I18n
@attribute [JSCustomElement]

<AppSheet Class="mb-12 overflow-hidden" Theme="@Theme">
    <MSimpleTable>
        <caption class="pa-4">@I18n.T("md-breakpoints")</caption>
        <thead>
        <tr class="text-left">
            <th>@I18n.T("device")</th>
            <th>@I18n.T("code")</th>
            <th>@I18n.T("type")</th>
            <th>@I18n.T("range")</th>
        </tr>
        </thead>
        <tbody>
        @foreach (var breakpoint in _breakpoints)
        {
            <tr>
                <td>
                    <MIcon Left>@breakpoint.Icon</MIcon>
                    <span>@I18n.T(breakpoint.Device)</span>
                </td>
                <td>
                    <strong>@I18n.T(breakpoint.Code)</strong>
                </td>
                <td>@I18n.T(breakpoint.Type)</td>
                <td>@breakpoint.Range</td>
            </tr>
        }
        </tbody>
        <tfoot>
        <tr>
            <td class="text-caption text-center grey--text"
                colspan="4">
                @I18n.T("desktop-browser-scrollbar-16px")
            </td>
        </tr>
        <tr>
            <td class="text-right text--secondary" colspan="4">
                <small class="d-block mr-n1 mb-n6">
                    <a class="text-decoration-none d-inline-flex align-center"
                       href="https://material.io/design/layout/responsive-layout-grid.html"
                       rel="noopener noreferrer"
                       target="_blank">
                        <MIcon Class="mr-1" Small Style="color: inherit;">
                            $materialDesign
                        </MIcon>
                        @I18n.T("specification")
                    </a>
                </small>
            </td>
        </tr>
        </tfoot>
    </MSimpleTable>

</AppSheet>

@code {

    record Breakpoint(string Icon, string Device, string Code, string Type, string Range);
    private Type _type;
    private List<Breakpoint> _breakpoints =
    [
        new Breakpoint("mdi-cellphone", "extra-small", "xs", "small-to-large-phone", "< 600px"),
        new Breakpoint("mdi-tablet", "small", "sm", "small-to-medium-tablet", "600px > < 960px"),
        new Breakpoint("mdi-laptop", "medium", "md", "large-tablet-to-laptop", "960px > < 1264px*"),
        new Breakpoint("mdi-monitor", "large", "lg", "desktop", "1264px > < 1904px*"),
        new Breakpoint("mdi-television", "extra-large", "xl", "4k-ultra-wide", "> 1904px*")
    ];

    [Parameter]
    public string Theme { get; set; }

}
